<template>
    <vc-viewer @ready="onViewerReady">
        <vc-collection-primitive>
            <vc-primitive-cluster
                ref="primitiveClusterRef"
                :show="true"
                :enabled="true"
                v-if="billboards.length"
                :billboards="billboards"
                :labels="labels"
                :minimum-cluster-size="minimumClusterSize"
                @cluster-event="onClusterEvent"
            ></vc-primitive-cluster>
        </vc-collection-primitive>
        <!-- 注记层 -->
        <vc-layer-imagery :sort-order="20">
            <vc-imagery-provider-tianditu map-style="cva_c" :token="tandituToken"></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
        <vc-layer-imagery :sort-order="10">
            <vc-imagery-provider-tianditu :map-style="mapStyle" :token="tandituToken" ref="provider"></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
    </vc-viewer>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    const tandituToken = ref('436ce7e50d27eede2f2929307e6b33c0')
    const mapStyle = ref('img_c')
    const billboards = ref<any>([])
    const labels = ref<any>([])
    const minimumClusterSize = ref(100)
    const onViewerReady = ({ Cesium, viewer }) => {
        Cesium.Resource.fetchJson('https://zouyaoji.top/vue-cesium/SampleData/json/schools.geojson').then(res => {
          const { features } = res
          for (let i = 0; i < features.length; i++) {
            const feature = features[i]
            const properties = feature.properties;
            const coordinates = feature.geometry.coordinates

            labels.value.push({
              show: true,
              scale: 1,
              showBackground: true,
              backgroundColor: Cesium.Color.fromCssColorString('#000000').withAlpha(0.1),
              verticalOrigin: 1,
              horizontalOrigin: 0,
              pixelOffset: new Cesium.Cartesian2(0, -20),
              font: '16px sans-serif',
              position: [coordinates[0], coordinates[1]],
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
              distanceDisplayCondition: [0, Number.POSITIVE_INFINITY],
              text: properties.name
            })

            billboards.value.push({
              image: 'https://zouyaoji.top/vue-cesium/images/mark-icon.png',
              width: 32,
              height: 32,
              position: [coordinates[0], coordinates[1]],
              _xyData: properties,
              onClick: e => {
                console.log(e)
              }
            })
          }
        })
    }

    const onClusterEvent = (ids, cluster) => {
        console.log('asd')
        cluster.billboard.show = true
        cluster.label.show = false
        cluster.billboard.id = ids
        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER
        ids.length >= 300
            ? (cluster.billboard.image = 'https://zouyaoji.top/vue-cesium/SampleData/images/cluser/300+.png')
            : ids.length >= 150
            ? (cluster.billboard.image = 'https://zouyaoji.top/vue-cesium/SampleData/images/cluser/150+.png')
            : ids.length >= 90
            ? (cluster.billboard.image = 'https://zouyaoji.top/vue-cesium/SampleData/images/cluser/90+.png')
            : ids.length >= 30
            ? (cluster.billboard.image = 'https://zouyaoji.top/vue-cesium/SampleData/images/cluser/30+.png')
            : ids.length > 10
            ? (cluster.billboard.image = 'https://zouyaoji.top/vue-cesium/SampleData/images/cluser/10+.png')
            : (cluster.billboard.image = 'https://zouyaoji.top/vue-cesium/SampleData/images/cluser/' + ids.length + '.png')
    }

</script>
<style>
.home-root{
    width: 100%;
    height: 100%;
    background-color: #999999;
}
</style>